<template>
  <div class="rubik-big-a">
    <div ref="rubikX" class="rubikX"></div>
    <div class="boxCtrl">


      <div class="layerCtrl"
           :class="{'isShow':isShow}">
        <div style="margin: 0 10px;
          ">

          layer:
          <select name="layer" v-model="layer">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <button @click="newGame">NEW GAME</button>
          <button @click="random">随机打乱</button>
        </div>
      </div>


      <button @click="ctrlKey.boxMove('top')">X</button>
      <button @click="ctrlKey.boxMove('bottom')">X'</button>
      <button @click="ctrlKey.boxMove('left')">Y</button>
      <button @click="ctrlKey.boxMove('right')">Y'</button>
      <button @click="ctrlKey.boxMove('zTop')">Z</button>
      <button @click="ctrlKey.boxMove('zBottom')">Z'</button>



      <button @click="backZero">-O-</button>


    </div>
    <div style="position: absolute;top: 0;left: 0;font-size: 13px">fps:{{fps}}</div>
  </div>
</template>

<script>
  import RubikX from "./rubikCube";
  export default {
    name: "rubikX",
    mounted() {
      this.newGame();
      this.calcFps();
      // this.fpsTest();
    },
    data(){
      return {
        isShow:true,
        ctrlKey:null,
        ctrlKeyMethods:null,
        layer:3,
        bigMove:'',
        bigX:-38,bigY:-38,bigZ:0,
        fps:0,
        fps2:0
      }
    },
    watch:{
      bigX(){
        this.bigMoving();
      },
      bigY(){
        this.bigMoving();
      },
      bigZ(){
        this.bigMoving();
      }
    },
    methods:{
      calcFps(debounce = 1000){
        let vm=this;
        let lastTime = Date.now();
        let count = 0; // 记录decounce周期内渲染次数
        (function loop(){
          count++
          const now = Date.now()
          if( now - lastTime > debounce){
            const fps = Math.round(count / ((now - lastTime) / 1000))
            lastTime = now
            count = 0
            vm.fps=fps;
          //  console.log('fps:', fps)
          }
          requestAnimationFrame(loop)
        })()
      },
      backZero(){
        this.isShow=!this.isShow;
      },
      random(){
        this.ctrlKey.random();
      },
      newGame(){
        let obj=this.$refs.rubikX;
        obj.innerHTML='';
        this.ctrlKey=new RubikX(obj,this.layer);

        this.bigMove=this.$refs.rubikX.getElementsByClassName('bigMove')[0];
        this.bigMoving();
        this.ctrlKeyMethods=this.ctrlKey.methods;
      },
      bigMoving(){
        this.bigMove.style.transform=`rotateX(${this.bigX}deg) rotateY(${this.bigY}deg) rotateZ(${this.bigZ}deg)`;
      },
    }
  }
</script>

<style scoped>

  .boxCtrl [type=range]{
    width: 136px;
    margin: 0;
  }
  .boxCtrl span{
    display: inline-block;
    width: 50px;
  }
  .layerCtrl select{
    width: 70px;
    height: 30px;
  }
  .btnCtrl button,.boxCtrl button{
    width: 80px;
    height: 35px;
    font-size: 16px;
    text-align: center;
  }
  .btnCtrl button{
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
  }
  button:hover{
    background-color: #333;
    color:#eeeeee;
  }
  .btnCtrl{
    max-width: 540px;
    margin: 15px auto;
  }
  .btnBox{
    max-width: 80px;
    display: inline-block;
    margin-right: 10px;
  }
  .boxCtrl{
    max-width:560px ;
    margin: 10px auto;
    position: relative;
  }
  .layerCtrl{
    position: absolute;
    width: 480px;
    height: 35px;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(32,33,36,.28);
    transition: all .3s;
  }
  .layerCtrl button{
    width: 150px;
  }
  .isShow{
    display: none;
  }

  .rubik-big-a{

    -webkit-user-select:none;

    -moz-user-select:none;

    -ms-user-select:none;

    user-select:none;
  }
</style>
